<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>消息管理</title>
		<!--引入layui的css  -->
	</head>
	<!--引入layui的js  -->
	<!--引入jquery的js  -->
	<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
	<script src="../lib/layui-v2.6.3/layui.js"></script>
	<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
	<script src="../js/global.js"></script>
	<body>
	<!-- 查询条件输入框 -->
	<div class="layui-form-item" style="margin-top: 10px;">
		<form class="layui-form" onsubmit="return false;">
			<label class="layui-form-mid">开始时间:</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="beginTime" name="beginTime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			</div>
			<label class="layui-form-mid">结束时间：</label>
			<div class="layui-input-inline" style="width: 120px;">
				<input type="text" id="endTime" name="endTime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
			</div>

			<label class="layui-form-mid">状态:</label>
			<div class="layui-input-inline" style="width: 200px;">
				<select name="isRead">
					<option value="">请选择</option>
					<option value="1">已读</option>
					<option value="2">未读</option>
				</select>
			</div>
			
			<div class="layui-input-inline" style="width: 300px;">
				<button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
				<button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
			</div>
		</form>
	</div>
	
	<!--树形的弹层页面  -->
	<div id="treeLayer" style="display: none; margin-top: 20px;">
			<div id="demoTree" class="demo-tree-more"></div>
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" id="submitTree" ><i class="layui-icon">&#xe605;</i>保存</button>
			</div>
	</div>
	
	<!--穿梭框的弹层页面  -->
	<div id="transferLayer" style="display: none; margin-top: 20px;">
			<div id="demoTransfer" class="demo-transfer"></div>
	</div>

	<!-- 修改的弹层页面  -->
	<!-- 编辑的弹层DIV  -->
	<div id="editLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="editForm" id="editForm" action="">
			<div class="layui-form-item">
				<label class="layui-form-label">内容</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="content" class="layui-input" autocomplete="off" lay-verify="required" disabled="disabled">
					<input type="hidden" name="id" />
				</div>
			</div>
			<div class="layui-btn-container" style="text-align:center;">
				<button class="layui-btn" lay-filter="editSubmitBtn" lay-submit="">提交</button>
			</div>
		</form>
	</div>


	<!-- 新增的弹层页面  -->
	<div id="addLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="addForm" id="addForm"
			action="">
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>产品名称:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="pName" class="layui-input" 
							autocomplete="off" lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>正常售价:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="sellPrice"
						class="layui-input" autocomplete="off" lay-verify="required|number">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red">*</span>开售时间:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="onSaleTime" placeholder="yyyy-MM-dd HH:mm:ss" 
						class="layui-input" autocomplete="off" lay-verify="required|datetime">
				</div>
			</div>
			<div class="layui-btn-container" style="text-align:center;">
				<button class="layui-btn" lay-filter="addSubmit" lay-submit="">提交</button>
			</div>
		</form>
	</div>


	<!-- 查看的弹层页面  -->
	<div id="detailLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="detailForm" id="detailForm"
			action="">
			<div class="layui-inline">
				<div class="layui-form-item">
					<label class="layui-form-label">产品名称:</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text"  name="pName" class="layui-input" disabled="disabled">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">生产厂家:</label>
					<div class="layui-input-inline" style="width: 300px;">
						<input type="text"  name="factory" class="layui-input" disabled="disabled">
					</div>
				</div>
			</div>
		</form>
	</div>

	<!-- 图片上传的弹层页面  -->
	<div id="imgUploadLayer" style="display: none; margin-top: 20px;">
		<form class="layui-form" lay-filter="imgForm" id="imgForm"
			action="">
			<input type="hidden" id="pid-img" name="pid" class="layui-input">
			<input type="hidden" id="mainImgUrl" name="mainImgUrl" class="layui-input">
			<input type="hidden" id="futuImgUrl" name="futuImgUrl" class="layui-input">
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
			  <legend>产品图片上传，上传完后记得提交哦</legend>
			</fieldset>
			<div class="layui-upload" style="margin-left: 10px">
			  <button type="button" class="layui-btn" id="maintu">主图上传</button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="demo1" style="width: 300px;height:200px" />
			    <p id="demoText1"></p>
			  </div>
			</div>
			<div class="layui-upload" style="margin-left: 10px">
			  <button type="button" class="layui-btn" id="futu">副图上传</button>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="demo2" style="width: 300px;height:200px" />
			    <p id="demoText2"></p>
			  </div>
			</div>  
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" lay-filter="imgSubmit" lay-submit="">提交</button>
			</div>
		</form>
	</div>



		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>
		
		<!--表格数据里的编辑、查看等操作按钮  -->
		<script type="text/html" id="barDemo">
             {{# if (d.isRead == 2){}}
                 <a class="layui-btn layui-btn-xs layui-btn-primary ops" ops="message:edit" lay-event="edit"><i class="layui-icon">&#xe642;</i>设为已读</a>
             {{# } }}

	</script>
		
		<!-- 开关1（既能开也能关） -->
		<script type="text/html" id="switchBar1">
    		<input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isLockSwitch" lay-skin="switch" lay-text="已锁定|未锁定" {{d.isLock=="1" ? "checked":""}}>
		</script>
		<!-- 开关2（只能关，不能开） -->
		<script type="text/html" id="switchBar2">
    		<input type="checkbox" data-id="{{d.id}}" name="status" lay-filter="isAdminSwitch" lay-skin="switch" lay-text="是|不是" {{d.isAdmin=="0" ? "disabled":""}} {{d.isAdmin=="1" ? "checked":""}}>
		</script>
		
		

		<script>
		
			//全局变量
			var cur_roleId; //正在编辑的角色id			
			var treeSelectedArr = []; //声明数组，用于保存选中的tree节点的Id
		
			layui.use(['laydate','layer','form','table','tree','upload','transfer'], function() {
				var laydate = layui.laydate	//日期组件
					,layer = layui.layer	//弹层组件
					,form = layui.form		//表单组件
					,upload = layui.upload  //上传组件
					,tree = layui.tree		//树形结构组件
					,$= layui.jquery    	//jQuery
					,table = layui.table	//表格组件
					,transfer = layui.transfer; //穿梭框组件
					
					//日期控件
					laydate.render({
						elem: '#beginTime'
					});
					laydate.render({
						elem: '#endTime'
					});
					

					
				//渲染表格，填充数据
			 	table.render({
					elem: '#proTable',			//对应上面定义的表格ID
					url: globalData.server+'message/selectAllMessage/?receiverId='+globalData.userId,				//提交到后台的地址
					headers:{token:globalData.token},
					method: 'get',				//提交方式 get或者post
					even: true, 				//表格隔行变色
					page: true,					//开启分页
					toolbar: '#toolbarDemo', 	//开启头部工具栏，并为其绑定左侧模板
					title: '产品表', 				//表格名称
					cols: [
						[{
							field: 'id',	//对应实体类里的属性    （必需有）
							fixed: 'left',	//固定方式，left左固定，right右固定 （可选）
							align:'center', //排列方式：left左对齐，center居中，right右对齐（可选）
							width: 80,		//单元格宽度（可选）	
							title: 'ID',	//表头名称			（必需有）
							sort: true		//开启排序（可选）
						}, {
							field: 'content',
							title: '消息内容',
							width: 180,
						},{
							field: 'senderId',
							title: '发送人id',
							width: 120,
						},{
							field: 'senderName',	//对应实体类里的属性
							width: 150,		//单元格宽度
							title: '发送人名字'		//表头名称
						}, {
							field: 'receiverId',
							width: 120,
							title: '接收人Id',
						}, {
							field: 'receiverName',
							width: 180,
							title: '接受人名字'
						},{
							field: 'sendTime',
							title: '发送时间',
							width: 180,
						},{
							field: 'isRead',
							title: '是否已读',
							width: 170,
							templet: function (d) {
								if (d.isRead == 1) {
									return '<div style="color:#aa5500;" >已读</div>';
								}else{
									return '<div style="color:#5555ff;" >未读</div>';
								}
							}
						},{
							fixed: 'right',
							width: 150,
							title: '操作',
							toolbar: '#barDemo'
						}]
					],
					done: function(res, curr, count){
						var myOps = sessionStorage.getItem("buttonPermission");
						$(".ops").each(function(){
							if(myOps.indexOf($(this).attr('ops'))==-1){
								$(this).hide();
							}
						});
					}
				});
					
			  // 处理开关点击时把信息传入到后台进行修改（isLockSwitch写对应开关的lay-filter值即可）
		      form.on('switch(isLockSwitch)', function (data) {
		          var id = $(this).attr('data-id');			//获得当前点击对象的id值
		          var valid = this.checked ? 'on' : 'off';	//获取到点击后的开关状态（on/off）
		          var x=data.elem.checked;					//获取到点击后的开关状态（true/false）
		          layer.open({
		              content: '确定要修改状态吗？'				//给用户的友好提示
		              ,btn: ['确定', '取消']
		              ,yes: function(index, layero){
		                  data.elem.checked=x;
		                  layer.close(index);
		                  $.ajax({
		                      type : "POST",
		                      url : "",
		                      data : {"id" : id , "valid" : valid},
		                      success : function(res) {
		                          if(res){
		                              layer.msg("修改成功！");
		                          }else{
		                              layer.msg("修改失败！");
		                          }
		                          form.render();
		                      },
		                      error : function() {
		                      }
		                  });
		              }
		              ,btn2: function(index, layero){
		                  //按钮【按钮二】的回调
		                  data.elem.checked=!x;
		                  form.render();
		                  layer.close(index);
		                  //return false 开启该代码可禁止点击该按钮关闭
		              }
		              ,cancel: function(){
		                  //右上角关闭回调
		                  data.elem.checked=!x;
		                  form.render();
		                  //return false 开启该代码可禁止点击该按钮关闭
		              }
		          });
		          form.render();
		          return false;
		      });
				
				/*
					条件查询	submit 对应 lay-submit  search 对应 lay-filter
				*/
			    form.on('submit(search)', function (data) {
	                var field = data.field;		//获取所有的输入条件值
	                //执行重载
	                table.reload('proTable', {
	                    page: { curr: 1 }, 		// 重载后回到第一页
	                    where: field			// 把所有的输入值传给后台
	                });
	            }); 
				
				//表格头部工具栏事件
				table.on('toolbar(filterTable)', function(obj){
				    switch(obj.event){
				    	//新增按钮
				      case 'add':
				    		//清空新增页面的表单内容，防止上次输入的数据还在
							$("#addForm")[0].reset();	
						 	//打开新增的弹层
							layer.open({
								type:1, 
								title: '您正在新增产品信息',
								content: $('#addLayer'),
								area: ['800px','600px']
							});
				      break;
				      	//批量删除按钮
				      case 'delAll':
				    		//获取选中的数据
			                var checkStatus = table.checkStatus('proTable');
			                var ids = [];
			                for(var i=0; i<checkStatus.data.length; i++){
			                	ids.push(checkStatus.data[i].id)
			                }
			                if(ids.length == 0){
			                	alert("请选择需要删除的产品");
			                	return;
			                }
			                //拼接id(把数组转成字符串，并且用逗号拼接),比如ids=[2,5,6]，那么id='2,5,6'
			                var id = ids.join(',');
			                if(confirm("确定全部删除吗？")){
			                	$.ajax({
									type: 'post', 		//提交方式get或post
									url: '', 			//提交路径
									data: {'ids':id}, 	//参数
									dataType: 'json', 	//返回的数据类型
									success: function(res) { 		//提交成功
										layer.alert(res.msg);
										table.reload('proTable'); 
									},
									error: function() { 			//提交失败
										alert("系统异常！！")
									}
								}); 
			                }
				    	  
				      	break;
				    };
				  });
				
			  	//数据表格里的事件监听
				table.on('tool(filterTable)',function(obj){
					var data = obj.data;//获取当前行的数据
					
					switch(obj.event){
						case 'editRole': //穿梭框组件
							//获取穿梭框左边数据
							$.ajax({
								type: 'post',				
								url: globalData.server + "roles/GetRolesAll",	
								data: {
									"token": globalData.token
								}, 
								dataType: 'json', 			
								success: function(res) {
									//res就是接口返回的所有角色数据，直接返回List
									var zuo = res;
									
									//获取穿梭框右边数据
									var you =  new Array();
									$.ajax({
										type: 'post',				
										url: globalData.server + "roles/getRolesByUid",	
										data: {
											"uid": data.id,
											"token": globalData.token
										}, 
										dataType: 'json', 			
										success: function(res) {
											//res是接口返回的当前用户的所有角色，直接返回List
											for(var i = 0; i < res.length; i++) {
												you.push(res[i].roleId);
											}
											
											
											//渲染穿梭框
											transfer.render({
												elem: '#demoTransfer',
												title: ['系统所有角色', '当前用户的角色'],
												data: zuo,
												value: you,
												parseData: function(udata) {
																return {
																	"value": udata.id, //数据值
																	"title": udata.name //数据标题
																}
															},
												onchange: function(obj, index) {
													if(index == "0") {
															//新增用户角色
															for (var i = 0; i < obj.length; i++) {
																$.ajax({
																	type: "post",
																	url: "" + globalData.server + "user/AddUserToRole",
																	data: {
																		"userId": data.id,
																		"roleId": obj[i].value,
																		"token": globalData.token
																	},
																	dataType: 'json',
																	success: function(res) { //提交成功
																		if(res){
																			layer.msg("设置角色成功！",{icon:1})
																		}
																	},
																	error: function() { //提交失败
																		alert("系统异常！！")
																	}
																});
															}
											
													} else {
														//删除用户角色
														for(var i = 0; i < obj.length; i++) {
															$.ajax({
																type: "post",
																url: "" + globalData.server + "user/RemoveUserFromRole",
																data: {
																	"userId": data.id,
																	"roleId": obj[i].value,
																	"token": globalData.token
																},
																dataType: 'json',
																success: function(res) { //提交成功
																	if(res){
																		layer.msg("移除角色成功！",{icon:1})
																	}
																},
																error: function() { //提交失败
																	alert("系统异常！！")
																}
															});
														}
											
													}
												}
											});
										},
										error: function() {
											alert("获取失败！！！")
										}
									});
								},
								error: function() {
									alert("获取失败！！！")
								}
							});
							
							//打开穿梭框弹层
							layer.open({
								type: 1,
								title: '您正在设置用户[' + data.loginName + ']的角色',
								content: $("#transferLayer"),
								area: ['500px', '400px'],
								fixed: false, //不固定
								maxmin: true,
								offset: '10px'
							});
							
							break;
				      case 'edit':		//修改操作
				    	  
				    		//数据的回显
							form.val("editForm", data);
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在修改编号【'+ data.id + '】的信息',
								content: $('#editLayer'),
								area: ['800px','600px']
							});
				    	  
				      break;
				      case 'detail':		//查看操作
				    		//数据的回显
							form.val("detailForm", data);
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在查看编号【'+ data.id + '】的信息',
								content: $('#detailLayer'),
								area: ['800px','600px']
							});
			      	  break;
				      case 'del':		//删除操作
				    		if(confirm("确定删除吗？")){
				    			$.ajax({
									type: 'post', 					//提交方式get或post
									url: '',	 					//提交路径
									data: {"id":data.id}, 			//参数
									dataType: 'json', 				//返回的数据类型
									success: function(res) { 		//提交成功
										layer.alert(res.msg);		//提示信息
										table.reload('proTable'); 	// 修改后要刷新表格
									},
									error: function() { //提交失败
										alert("系统异常！！")
									}
								}); 
				    		}
				      
				      
				      
			      	  break;
				      case 'editImg':		//图片管理操作
				    		//数据的回显
							form.val("imgForm", data);
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在操作编号【'+ data.id + '】的图片信息',
								content: $('#imgUploadLayer'),
								area: ['700px','600px']
							});
				    	  
				      break;
					  case 'editTree':		//树形组件操作
					  
							cur_roleId = data.id; //给全局变量的当前角色ID赋值
							//获取数据
							$.ajax({
								type: 'post', 					
								url: 'getMenu', 						
								data: {roleId:data.id},
								dataType: 'json', 					
								success: function(res) { 		
									tree.render({
										elem: '#demoTree',
										data: res,
										id: 'roleTreeId',
										showCheckbox: true
									})
								},
								error: function() { //提交失败
									alert("系统异常！！")
								}
							}); 
			    		
							//打开弹层
							layer.open({
								type:1, 
								title: '您正在操作编号【'+ data.id + '】的图片信息',
								content: $('#treeLayer'),
								area: ['700px','600px']
							});
							
				    	  
				      break;
			    	};
				})
				
				//给角色设置权限，提交操作
				$("#submitTree").click(function() {
					var nodes = tree.getChecked('roleTreeId');
					treeSelectedArr = []; //清空已选中的权限数组
					for(var i = 0; i < nodes.length; i++) {
						getChildenId(nodes[i]); //调用递归的方法来获取所有选中节点的Id
					}
					//调用远程接口保存设置
					$.ajax({
						type: 'post', 					
						url: 'savePermission', 						
						data: {roleId:cur_roleId,selectedModule:treeSelectedArr.join(",")},
						dataType: 'json', 					
						success: function(res) { 		//提交成功
							if(res) {
								layer.msg('保存权限成功！', {
									icon: 1,
									time: 1000
								}, function() {
									layer.closeAll(); //关闭修改弹出层
								});
							} else {
								layer.msg('保存权限失败！', {
									icon: 2,
									time: 1000
								})
							}
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 
					
				});
				
				
				
				//监听修改弹层的提交按钮（当点击修改弹层的提交按钮执行这里）
				form.on('submit(editSubmitBtn)', function(data) {
					$.ajax({
						type: 'post',
						url: globalData.server+'message/updateRead',
						data: $("#editForm").serialize(),
						headers: {token: globalData.token},
						dataType: 'json',
						success: function(res) { //提交成功
							layer.alert(res.msg, {
								icon: 6
							}, function() {
								//关闭弹层
								layer.closeAll();
								//刷新表格
								table.reload('proTable', {
									page: {
										curr: 1
									}
								});
							});
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					});

					return false;
				});
			  	
				//新增弹层的提交按钮
				form.on('submit(addSubmit)', function(data) {
					$.ajax({
						type: 'post', 					//提交方式get或post
						url: '',	 					//提交路径
						data: $("#addForm").serialize(), //参数
						dataType: 'json', 				//返回的数据类型
						success: function(res) { 		//提交成功
							layer.closeAll();			//关闭弹层
							layer.alert(res.msg);		//提示信息
							table.reload('proTable'); 	// 修改后要刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 
					
					return false;
				});
				
				
				
				//主图片上传
		        var uploadInst1 = upload.render({
		            elem: '#maintu'
		            ,url: 'uploadImg.do'
		            ,accept:'images'
		            ,size:50000
		            ,before: function(obj){
		            	//预读本地文件
		                obj.preview(function(index, file, result){
		                    $('#demo1').attr('src', result);
		                });
		            }
		            ,done: function(res){
		                //如果上传失败
		                if(res.code > 0){
		                    return layer.msg('上传失败');
		                }
		                
		                //上传成功
		                var demoText = $('#demoText1');
		                demoText.html('<span style="color: #4cae4c;">上传成功</span>');
		                //图片url填写
		                var fileupload = $("#mainImgUrl");
		                fileupload.attr("value",res.data);
		            }
		            ,error: function(){
		                //演示失败状态，并实现重传
		                var demoText = $('#demoText1');
		                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		                demoText.find('.demo-reload').on('click', function(){
		                    uploadInst1.upload();
		                });
		            }
		        });
		       //副图片上传
		        var uploadInst2 = upload.render({
		            elem: '#futu'
		            ,url: 'uploadImg.do'
		            ,accept:'images'
		            ,size:50000
		            ,before: function(obj){
		            	//预读本地文件
		                obj.preview(function(index, file, result){
		                    $('#demo2').attr('src', result);
		                });
		            }
		            ,done: function(res){
		                //如果上传失败
		                if(res.code > 0){
		                    return layer.msg('上传失败');
		                }
		                
		                //上传成功
		                var demoText = $('#demoText2');
		                demoText.html('<span style="color: #4cae4c;">上传成功</span>');
		                //图片url填写
		                var fileupload = $("#futuImgUrl");
		                fileupload.attr("value",res.data);
		            }
		            ,error: function(){
		                //演示失败状态，并实现重传
		                var demoText = $('#demoText2');
		                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
		                demoText.find('.demo-reload').on('click', function(){
		                    uploadInst2.upload();
		                });
		            }
		        });
		       
		        //图片上传的提交按钮
				form.on('submit(imgSubmit)', function(data) {
					console.log($("#imgForm").serialize());
					$.ajax({
						type: 'post', 					//提交方式get或post
						url: '', 						//提交路径
						data: $("#imgForm").serialize(), 	//参数
						dataType: 'json', 					//返回的数据类型
						success: function(res) { 		//提交成功
							layer.closeAll();			//关闭弹层
							layer.alert(res.msg);		//提示信息
							table.reload('proTable'); 	//刷新表格
						},
						error: function() { //提交失败
							alert("系统异常！！")
						}
					}); 
					return false;
				});
				
				
			});
			
			
			//递归获取选中节点的Id
			function getChildenId(node) {
				if(node != null) {
					treeSelectedArr.push(node.id);
					for(var i = 0; node.children != null && i < node.children.length; i++) {
						getChildenId(node.children[i]);
					}
				}
			}
		</script>
	</body>
</html>
